

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="Shortcut Icon" href="http://htmljs.b0.upaiyun.com//images/logo.ico?123"><link href="http://htmljs.b0.upaiyun.com//images/logo.ico?123" rel="shortcut icon" type="image/x-icon"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable = no"/>
<link href="http://htmljs.b0.upaiyun.com//images/icon.png" rel="apple-touch-icon"/>
<meta name="keywords" content="前端, 前端开发, web前端, web前端开发, 前端开发工程师, 前端开发攻城师,设计, 开发, 前端资源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,浏览器兼容, 前端开发工具, 前端招聘, jQuery API, CSS整形和优化工具 , JS压缩工具 , JS格式化工具 , CSS参考手册 ,HTML参考手册 , 多重搜索 , nodejs , node , boostrap , sublime"/>
<script>if($.browser.msie){alert("请不要使用ie浏览本站！本站不支持ie10以下浏览器。")}</script><title>乱炖周刊第11期 - 每周为您推送本站精选的新鲜速递</title><base target="_blank"/><meta name="description" content="前端乱炖每周会为您推送本站精选的新鲜速递。">
<style>
img{
  max-width:100%;
}
p{
  margin:10px 0;
}
a{
  text-decoration: none;
  color:#56b38e;
}
html,body{margin:0;background: #fefefe;font-size: 14px;color:#444;}
*{
   font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;;
}
a:hover{
  text-decoration: underline;
}
@media screen and (min-width:100px) and (max-width:650px){
  table{
    width:100% !important;
  }
  body{
    margin:0 5px;
  }
  .wrapper,.tip,.title{width:100% !important;overflow: hidden;}
  #googlead{display: none !important;}
  #wx img{width:50%;}
  #WBCommentFrame{
    display: none;
  }
    .job .user{
        display:none !important;
    }
    .articles .title span{display:none !important;}
}
.job{background:#fff;overflow:hidden;}.job .title{background:#fff;padding:5px 10px;font-size:14px;line-height:30px;}
.job .title img{width:30px;height:30px;border-radius:50px;}
.job .title .headpic{float:right;}
.job .con{padding:10px;line-height:25px;background:#f7f7f7;}.job .con .item{margin-right:10px;display:inline-block;font-size:13px;}.job .con .item .key{color:#666;}
.job .con .item .value{color:#999;}
.job .con .count em{color:#999;margin-right:10px;}
.job .user .nick{float:left;font-size:14px;line-height:50px;margin:10px;}
article {
    background: #f9f9f9;
    padding: 10px 15px;
    position: relative;
    border-bottom: 1px solid #f1f1f1;
}
.entry-title {
    margin: 0;
    height: 30px;
    overflow: hidden;
    font-size: 16px;
    line-height: 30px;
    font-weight: normal;
    color: #444;
}
.entry-title a {
    color: #444;
}
.entry-title .column-col{
    margin-left:10px;
    font-size:14px;
    color:#999;
}
article .entry-foot .item {
    font-size: 12px;
    line-height: 25px;
    margin-right: 10px;
}
article .entry-foot .item {
    font-size: 12px;
    line-height: 25px;
    margin-right: 10px;
}
article.yooo {
    background: #f2f2f2;
}

</style>
</head>

<body>

  <div id="newsletter" style="margin:0;padding:0; color: #333333; font: 13px/20px 'Helvetica Neue',Helvetica,Arial,Sans-serif;font-family:'Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif!important;overflow:hidden;" >
    <div class="wrapper" style="margin: 0px auto 0; width: 600px; padding-top:16px; padding-bottom:10px;">
      <div class="header clearfix" style="font-weight:bold;text-align:left;margin:10px 0;margin-top:20px;font-size:35px;color:#333;padding:0px;line-height: 43px;height:43px;">乱<img alt="炖" width="40" height="40" style="vertical-align: middle;margin-top:-8px;margin-left:5px;margin-right:5px;" src="http://htmljs.b0.upaiyun.com/uploads/1411395057234-%E6%9C%AA%E6%A0%87%E9%A2%98-4.png"/>周刊 第11期</div>
      <div style="color:#999;font-size:12px;padding-left:0px;line-height:45px;">主编：芋头</div>
        <div style="">
        <div style="padding:0px;">
          <p style="font-size:13px;color:#666;">乱炖周刊 是 <a href="http://www.html-js.com" target="_blank">前端乱炖</a> 网站推出的前端技术信息推送产品。我们会每周为您提供最新最有含量的内容推送，如果您有兴趣，欢迎订阅周刊。
          </p>
          <div style="float:left;margin-right:40px;">
          <p style="font-size:14px;margin-top:20px;color:#489275">订阅 乱炖周刊：</p>
          <p style="font-size:13px;">
            <input type="text" id="email" name="email" placeholder="输入常用邮箱地址" style="height:20px;width:200px;"/>
            <button id="submit" type="button" style="height:25px;vertical-align:1px;">订阅</button>
          </p>
        </div>
        <div style="float:left;">
          <p style="font-size:14px;margin-top:20px;color:#489275;">推荐给朋友：</p>

          <p style="font-size:13px;">
            <a href="http://service.weibo.com/share/share.php?appkey=659341943&url=http://www.html-js.com/static/htmljs-weekly-11.html&pic=http://htmljs.b0.upaiyun.com/uploads/1421161879929-Snip20150113_41.png&title=《乱炖周刊》第11期新鲜出炉啦，《乱炖周刊》是@前端乱炖 网站推出的前端精品文章推送产品，每周为您多渠道推送营养文，前端必备，推荐订阅。戳右边查看在线版→_→" target="_blank" title="分享到微博"><img src="http://htmljs.b0.upaiyun.com/uploads/1393254783476-button1.png" style="width:110px;margin-left:-8px;margin-top:-3px;"/>
            </a>
          </p>
        </div>
        </div>
      </div>
    </div>
  </div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·精品原创专栏</div>

  <div id="newsletter" >
      <div style="background: #f8f8db;font-size: 13px;width:600px;margin:0 auto;margin-top: 5px;color:#666;" class="tip"><div style="padding:10px;">每个乱炖专栏都是一系列原创文章的合集，我们希望能够提供一个展示和分享的平台，同时也让初学者能够系统学习前端知识。感谢每位作者的辛勤付出、无私奉献！</div></div>
  <div style="margin: 0px auto 0; width: 600px;"  class="wrapper">
      <article id="post-2400" class="">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/Some-research-about-webapp-CSS-text-Daoteng-units-in-the" title="关于webapp中的文字单位的一些捣腾" rel="bookmark" class="real-title-23">关于webapp中的文字单位的一些捣腾</a><span class="column-col">[<a href="http://www.html-js.com/article/column/222" class="column-title">css研究</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/1514" class="value url fn">小黑</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">2个月前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">6279</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">21</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">10</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2568" class="yooo">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/CSS-learning-CSS-Media-Query" title="CSS Media Query" rel="bookmark" class="real-title-95">CSS Media Query</a><span class="column-col">[<a href="http://www.html-js.com/article/column/805" class="column-title">CSS学习</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/1498" class="value url fn">cookfront</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">6天前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">721</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">2</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">2</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2559" class="">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/Brick-column-mobile-terminal-frontend-development-Jiangshui-debugging" title="移动端前端开发调试" rel="bookmark" class="real-title-75">移动端前端开发调试</a><span class="column-col">[<a href="http://www.html-js.com/article/column/799" class="column-title">Jiangshui 的砖栏</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/265" class="value url fn">于江水</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">14天前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">1943</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">10</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">9</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2582" class="yooo">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/CSS-learning-CSS3-Flexbox" title="CSS3 Flexbox" rel="bookmark" class="real-title-39">CSS3 Flexbox</a><span class="column-col">[<a href="http://www.html-js.com/article/column/805" class="column-title">CSS学习</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/1498" class="value url fn">cookfront</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">9小时前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">275</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">5</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">3</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2584" class="">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/The-front-end-of-the-porter" title="【译】走向Retina Web" rel="bookmark" class="real-title-6">【译】走向Retina Web</a><span class="column-col">[<a href="http://www.html-js.com/article/column/61" class="column-title">前端搬运工</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/675" class="value url fn">Button</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">5小时前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">71</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">1</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">1</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2581" class="yooo">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/CSS-study-on-the-introduction-of-CSS-in-an-external-style-sheet" title="引入css外部样式表" rel="bookmark" class="real-title-14">引入css外部样式表</a><span class="column-col">[<a href="http://www.html-js.com/article/column/222" class="column-title">css研究</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/1514" class="value url fn">DO1路人乙</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">21小时前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">339</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">5</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">2</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2573" class="">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/JSLiteio-JSLite-official-document-" title="JSLite 【官方文档】" rel="bookmark" class="real-title-30">JSLite 【官方文档】</a><span class="column-col">[<a href="http://www.html-js.com/article/column/812" class="column-title">JSLite.io</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/4744" class="value url fn">一起玩Apple网</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">1天前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">807</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">1</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">2</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2580" class="yooo">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/The-use-of-Reactjs-development-web-applications-to-understand-Flux" title="理解Flux" rel="bookmark" class="real-title-39">理解Flux</a><span class="column-col">[<a href="http://www.html-js.com/article/column/243" class="column-title">使用React.js开发web应用</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/526" class="value url fn">张小俊128</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">1天前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">169</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">1</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">2</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2569" class="">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/translation-front-Porter-CSS-implementation-response-type-full-screen-background-map" title="【译】CSS实现响应式全屏背景图" rel="bookmark" class="real-title-21">【译】CSS实现响应式全屏背景图</a><span class="column-col">[<a href="http://www.html-js.com/article/column/61" class="column-title">前端搬运工</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/675" class="value url fn">Button</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">6天前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">1615</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">5</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">2</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2565" class="yooo">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/The-CSS-study-1" title="css透明度的一些兼容测试" rel="bookmark" class="real-title-95">css透明度的一些兼容测试</a><span class="column-col">[<a href="http://www.html-js.com/article/column/222" class="column-title">css研究</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/1514" class="value url fn">DO1路人乙</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">4天前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">777</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">3</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">1</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2561" class="">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/Bearcat-javaScript-dependency-management" title="javaScript 依赖管理" rel="bookmark" class="real-title-48">javaScript 依赖管理</a><span class="column-col">[<a href="http://www.html-js.com/article/column/801" class="column-title">bearcat</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/4556" class="value url fn">fantasyni</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">11天前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">1473</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">13</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">5</a></span>
                  </div>
              </div>
          </div>
      </article>
      <article id="post-2575" class="yooo">
          <div class="rht">
              <h2 class="entry-title"><a href="http://www.html-js.com/article/Basic-writing-tag-frontend-development-template-engine--Jade-syntax-on-the-frontend-development-engine--the-template-Jade" title="前端开发引擎模板 -- Jade之标签的基本写法" rel="bookmark" class="real-title-8">前端开发引擎模板 -- Jade之标签的基本写法</a><span class="column-col">[<a href="http://www.html-js.com/article/column/809" class="column-title">前端开发引擎模板 -- Jade语法浅谈</a>] </span></h2>
              <div class="entry-foot">
                  <div class="others"><span class="author vcard item"><span class="index"> <i class="icon-user"></i></span><a rel="author" href="http://www.html-js.com/user/1117" class="value url fn">根号三</a></span><span class="time item"><span class="index"> <i class="icon-clock"></i></span><a class="value">3天前</a></span><span class="views item"><span class="index"> <i class="icon-eye-open"></i></span><a class="value">455</a></span><span class="views item"><span class="index"> <i class="icon-chat"></i></span><a class="value">2</a></span><span class="views item"><span class="index"> <i class="icon-thumbs-up"></i></span><a class="value">1</a></span>
                  </div>
              </div>
          </div>
      </article>
    <a href="http://www.html-js.com/article" style="line-height:30px;font-size:12px;color:#333;text-decoration:underline;padding-left:10px;">查看更多原创文章</a>
  </div>
</div>


<div class="title" style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-left:4px solid #4e9d7e;margin-top:20px;padding-left:5px;line-height:20px;">微信公众号</div>
    <div style="margin: 0px auto 0; width: 600px;" class="wrapper">
      <img width="250" style="" src="http://htmljs.b0.upaiyun.com/uploads/1394040251862-qrcode.png"/>
      <div style="clear:both;"></div>
    </div>
  </div>
  <div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;margin-top:20px;padding-left:5px;line-height:20px;" class="wrapper">
 <div style="background: none repeat scroll 0 0 #FFFFFF;  margin: 0px 0 0; padding: 20px 0;">
  <p class="title"  style="border-top:1px solid #ddd;font-size:12px;padding-top:10px;color:#999;"><a href="http://www.html-js.com">@前端乱炖 </a> 是一个功能丰富的提供高质量内容的技术社区</p>
     <p style="border-top:1px solid #ddd;font-size:12px;padding-top:10px;color:#999;" class="title" ><a href="http://www.html-js.com">行业合作请联系QQ：676588498 注明：乱炖合作</p>
<p style="border-top:1px solid #ddd;font-size:12px;padding-top:5px;color:#999;" class="title" >为了确保您能收到及时的通知，请将 master@html-js.com 添加为联系人。</p>
<script type="text/javascript">
(function(){
var url = "http://widget.weibo.com/distribution/comments.php?width=0&url=auto&border=1&brandline=y&fontsize=12&ralateuid=1734409185&appkey=659341943&dpc=1";
url = url.replace("url=auto", "url=" + encodeURIComponent(document.URL)); 
document.write('<iframe id="WBCommentFrame" src="' + url + '" scrolling="no" frameborder="0" style="width:100%"></iframe>');
})();
</script>
<script src="http://tjs.sjs.sinajs.cn/open/widget/js/widget/comment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.WBComment.init({
    "id": "WBCommentFrame"
});
</script>
   </div>
  </div>
</div>
   <script src="http://htmljs.b0.upaiyun.com//js/jquery.js"/></script>
<script>
$("#submit").on("click",function(){
  $.ajax({
    url:"/rss/email",
    type:"post",
    data:{email:$("#email").val()},
    dataType:"json",
    success:function(data){
      if(data.success){
        alert("订阅成功")
        $("#email").val("")
      }else{
        alert(data.info)
      }
    }
    });
  });
</script>


<script>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36222024-3']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>
  </body>
</html>